<script setup>
import {router} from "@/plugins/1.router/index.js";
import { getSessionList} from "@/api/common.js";
import CustomTabs from "@/components/customTabs.vue";
import {ref} from "vue";
import {distributionIndex, standardRadar} from "@/api/studentGrades.js";
import {useApi} from "@/composables/useApi.js";
import  standarGradeHeader from '@/pages/platform/components/standarGradeHeader.vue'

const studentInfo =ref({})
const standardGrades =ref({})
const goBack = ()=>{
  router.go(-1)
}
getSessionList(1).then(res=>{
  console.log(res)
})
const classGradesTipsList = [
  {title: '总分',color:'#c8afff'},
  {title: '英语',color:'#6ecefe'},
  {title: '数学',color:'#9edb71'},
  {title: '语文',color:'#fed060'},
]
const lineChartTabsList = [
  {
    title: '年级排名',
    value: 1
  },
  {
    title: '年级排名',
    value: 2
  }
]
const testTypeList = [
  {title: '期末',type:1},
  {title: '期中',type:2},
]
const testType = ref(1)
const testTypeChange = () =>{
  //   todo 调用接口
}

/** 获取标化雷达图开始*/
const standardRadarList = ref([])
const getStandardRadar = () => {
  standardRadar({...standardForm.value,type:scoresRadarType.value,class_id:class_id.value}).then(res=>{
    standardRadarList.value = res.data
  })
}
/** 获取标化雷达图结束*/
/** 获取标化饼图开始*/
const standardPieList = ref([])
const getStandardPie= () => {
  distributionIndex({...standardForm.value,type:subject.value}).then(res=>{
    standardPieList.value = res.data
  })
}
/** 获取标化饼图结束*/

  // 科目列表
const subjectList = ref([
    {
      type: 1,
      title: '总分',
    }, {
      type: 2,
      title: '语文',
    }, {
      type: 3,
      title: '数学',
    },{
      type: 4,
      title: '英语',
    }
  ])
const subject = ref(1)
const subjectChange = ()=>{
  getStandardPie()
}
const  scoresRadarType = ref(1)
const scoresTypeList = ref([
  {
    type: 1,
    title: '最高分',
  }, {
    type: 2,
    title: '中位数',
  }, {
    type: 3,
    title: '平均分',
  }])
const scoresRadarChange = ()=>{
  getStandardRadar()
}
/** 表格开始*/
const selectedItems = ref([]);
const total = ref(0)
const list = ref([])
let queryFrom = ref({page: 1, limit: 20, student_id: '', student_name: '', grade_id: '', class_id: '', examcourse_id: ''})
const headers = [
  {
    title: "得分项目",
    key: "real_name",
    width:"240px",
    align: 'start',
  },
  {
    title: "得分时间",
    width:"240px",
    align: 'start',
    key: "student_id",
  },
  {
    title: "评分教师",
    width:"240px",
    align: 'start',
    key: "gradeTitle",
  },
  {
    title: "评分方式",
    width:"240px",
    align: 'start',
    key: "classTitle",
  },
  {
    title: "评语",
    width:"240px",
    align: 'start',
    key: "examinationTime",
  },
]
const getList = async () => {
  const {data} = await useApi('/teacher/Api.Standardization/studentIndex').post({...queryFrom.value,...standardForm.value})
  total.value = data.value.data.total
  list.value = data.value.data.data.map(item => {
    return {
      ...item, id: item.standardization_id
    }
  })
}
const onChangePage = (val) => {
  queryFrom.value.page = val.page
  queryFrom.value.limit = val.limit
  getList()
}
// 头部表单回调
const onChange = val => {
  let data = JSON.parse(JSON.stringify(val))
  queryFrom.value = {...queryFrom.value, ...data}
  getList()
}

/** 表格结束 */

/** */
</script>

<template>
  <div class="content">
    <v-list class="header_box">
      <div class="head">
        <div class="head-arrow cursor-pointer" @click="goBack"> <i class="ri-arrow-left-s-line" style="font-size: 50px;"></i></div>
        <div class="heads">
          <div class="head_title">
            详细信息-素质成绩
          </div>
        </div>
        <div class="ml-auto flex-box right-box" >
          <div class="item flex-box">
            <div class="label">参考人数：</div>
            <div class="value">{{321}}人</div>
          </div>
          <div class="item flex-box">
            <div class="label">班级平均分：</div>
            <div class="value">{{321}}分</div>
          </div>
          <div class="item flex-box">
            <div class="label">年级平均分：</div>
            <div class="value">{{321}}分</div>
          </div>
          <div class="item flex-box">
            <div class="label">班级内排名：</div>
            <div class="value">{{ 321 }}名</div>
          </div>
          <div class="item flex-box">
            <div class="label">年级排名：</div>
            <div class="value">{{ 321 }}名</div>
          </div>
        </div>
      </div>
    </v-list>
    <VDivider/>
    <div class="main-bottom">
      <div class="student-box">
        <img class="avatar-box" src="../../assets/avatar.png" alt="">
        <div class="student-detail">
          <div class="name">{{studentInfo.real_name}}</div>
          <div class="bottom-detail">
            <div>
              性别：{{studentInfo.sex}}
            </div>
            <div>
              所属：{{studentInfo.gradeTitle}}{{studentInfo.classTitle}}
            </div>
            <div>
              出生：{{studentInfo.brith_time}}
            </div>
          </div>
        </div>
        <div class="right-disciplines">
          <div class="disciplines-item">
            <div class="disciplines-title">德</div>
            <div class="score-box"><span class="num">{{studentInfo.de||0}}</span>分</div>
          </div>
          <div class="disciplines-item">
            <div class="disciplines-title">智</div>
            <div class="score-box"><span class="num">{{studentInfo.zhi||0}}</span>分</div>
          </div>
          <div class="disciplines-item">
            <div class="disciplines-title">体</div>
            <div class="score-box"><span class="num">{{studentInfo.ti||0}}</span>分</div>
          </div>
          <div class="disciplines-item">
            <div class="disciplines-title">美</div>
            <div class="score-box"><span class="num">{{studentInfo.mei||0}}</span>分</div>
          </div>
          <div class="disciplines-item">
            <div class="disciplines-title">劳</div>
            <div class="score-box"><span class="num">{{studentInfo.lao ||0}}</span>分</div>
          </div>
        </div>
      </div>
      <!--      展示总览-->
      <div  class="text-display">
        <div class="text-display-item">
          <div>
            <div class="title">
              英语排名
            </div>
            <div style="color:rgba(22, 177, 255, 1)">
              2
            </div>
          </div>
          <div>
            <div class="title">
              年级英语最高分
            </div>
            <div>
              {{standardGrades.english?.max||0}}
            </div>
          </div>
          <div>
            <div class="title">
              英语平均分
            </div>
            <div>
              {{standardGrades.english?.avg||0}}
            </div>
          </div>
          <div>
            <div class="title">
              英语中位数
            </div>
            <div>
              {{standardGrades.english?.median ||0}}
            </div>
          </div>

        </div>
        <div class=" text-display-item">
          <div>
            <div class="title">
              数学排名
            </div>
            <div style="color:rgba(86, 202, 0, 1)">
              2
            </div>
          </div>
          <div>
            <div class="title">
              年级数学最高分
            </div>
            <div>
              {{standardGrades.maths?.max ||0}}
            </div>
          </div>
          <div>
            <div class="title">
              数学平均分
            </div>
            <div>
              {{standardGrades.maths?.avg ||0}}
            </div>
          </div>
          <div>
            <div class="title">
              数学中位数
            </div>
            <div>
              {{standardGrades.maths?.median ||0}}
            </div>
          </div>

        </div>
        <div class=" text-display-item">
          <div>
            <div class="title">
              语文排名
            </div>
            <div style="color:rgba(255, 180, 0, 1)">
              2
            </div>
          </div>

          <div>
            <div class="title">
              年级语文最高分
            </div>
            <div>
              {{standardGrades.maths?.max ||0}}
            </div>
          </div>
          <div>
            <div class="title">
              语文平均分
            </div>
            <div>
              {{standardGrades.maths?.avg ||0}}
            </div>
          </div>
          <div>
            <div class="title">
              语文中位数
            </div>
            <div>
              {{standardGrades.maths?.median||0}}
            </div>
          </div>
        </div>
      </div>
      <!--      成绩折线图-->
      <div class="mt-5 class-bar-box">
        <div class="flex-box chart-line">
          <div class="title">排名趋势</div>
          <div class="flex-box tip-item" v-for="(item,index) in classGradesTipsList" :key="index" >
            <div class="color-box" :style="{backgroundColor:item.color}"></div>
            <div class="name">
              {{item.title}}
            </div>
          </div>
          <custom-tabs style="margin-left: auto" :tabs="lineChartTabsList"/>
          <div>
            <el-select
              class="ml-6"
              v-model="testType"
              @change="testTypeChange"
              popper-class="mySelectStyle"
              style="width: 120px;"
              :teleported="false"
            >
              <el-option
                v-for="item in testTypeList"
                :key="item.type"
                :label="item.title"
                :value="item.type"
              />
            </el-select>

          </div>

        </div>
        <line-chart></line-chart>
      </div>
      <!--      雷达图 分数分布    -->
      <div class="mt-5 flex-box">
        <div class="radar-box box-shadow">
          <div class="flex-box chart-line">
            <div class="title">雷达图</div>
            <div class="ml-auto">
              <el-select
                class="ml-6"
                v-model="scoresRadarType"
                @change="scoresRadarChange"
                popper-class="mySelectStyle"
                style="width: 120px;"
                :teleported="false"
              >
                <el-option
                  v-for="item in scoresTypeList"
                  :key="item.type"
                  :label="item.title"
                  :value="item.type"
                />
              </el-select>

            </div>
          </div>
          <radar-chart v-if="standardRadarList.length!=0" height="430px" :data-list="standardRadarList"></radar-chart>
        </div>
        <div class="radar-box box-shadow" style="margin-left: 4%">
          <div class="flex-box chart-line ">
            <div>
              <div class="title">分数分布</div>
              <div class="tip">所在分布区间内人数占的比例</div>
            </div>
            <div class="ml-auto">
              <el-select
                class="ml-2"
                v-model="subject"
                @change="subjectChange"

                popper-class="mySelectStyle"
                style="width: 120px;"
                :teleported="false"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.type"
                  :label="item.title"
                  :value="item.type"
                />
              </el-select>
            </div>
          </div>
          <pie-chart :data-list="standardPieList" height="420px"></pie-chart>
        </div>
      </div>
      <!--          底部 table-->
      <div class="mt-10">
        <standar-grade-header title="学生列表"
                              :display-flag="true"
                              @onChange="onChange"
        />
        <VDataTable
          v-model="selectedItems"
          :headers="headers"
          :items="list"
      :items-per-page="100"
          item-key="id"
          show-select
          class="text-no-wrap"
        >
          <template #item.options="{ item }">
            <div class="d-flex align-center options-right-display">
              <div class="flex-column cursor-pointer">
                <i @click="viewDetail(item)" class="ri-menu-line"></i>
              </div>
            </div>
          </template>
        </VDataTable>
        <pagination-vue
          @onChange="onChangePage"
          :current-page="queryFrom.page"
          :page-size="queryFrom.limit"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>



<style scoped lang="scss">
@use "@configured-variables" as variables;
.content{
  background-color:rgba(var(--v-theme-surface));
}
.student-box{
  display: flex;
  align-items: center;
  background-color:rgba(var(--v-theme-surface));
  .avatar-box{
    width: 120px;
    height:120px;
    border-radius: 6px;
    margin-right: 24px;
  }
  .student-detail{
    margin-right: 80px;
    .name{
      font-size: 24px;
      color: #433C50;
      margin-bottom: 16px;
    }
    .bottom-detail{
      color: rgba(140, 135, 152, 1);
      font-size: 16px;
      margin-bottom: 5px;
    }

  }
  .right-disciplines{
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    .disciplines-item{
      .disciplines-title{
        font-size: 20px;
        color: rgba(46, 38, 61, 0.9);
      }
      .score-box{
        .num{
          font-size: 40px;
        }
      }
    }
  }
}
.header_box {
  padding: 0px;
  overflow: visible;
  display: flex;
  .head{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 12px;
    padding-right: 20px;
    .head-arrow{
      margin-left: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
    }
  }

}
.head {
  inline-size: 100%;
  padding-block: 12px;

  .heads {
    display: flex;
    align-items: center;
    inline-size: calc(100% - 48px);
    margin-block: 0;
    margin-left: 20px;

    .head_title {
      //color: #423b50;
      font-feature-settings: "ss01" on, "ss04" on;
      font-size: 20px;
      font-style: normal;
      font-variant-numeric: lining-nums tabular-nums;
      font-weight: 500;
      line-height: 140%; /* 28px */
    }

    .search {
      display: flex;
      align-items: center;
      border-radius: 74px;
      inline-size: 291px;
      margin-inline-start: 40px;
      padding-block: 8px;
      padding-inline: 16px;
      background-color: variables.$vertical-nav-background-color;

    }
  }
  .right-box{
    .item{
      .label{
        width: 120px;
        text-align: right;
        color: #8C8798;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "PingFang SC";
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 160% */
      }
      .value{
        flex-shrink: 0;
        color: rgba(46, 38, 61, 0.9);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "PingFang SC";
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
      }
    }
  }
}
.text-display{
  display:flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

  .text-display-item{
    margin-top:10px;
    width: 32%;
    display:flex;
    justify-content: space-between;
    box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
    padding: 20px;
    border-radius: 6px;
    .icon-box{
      width: 42px;
      height: 42px;
      padding: 8px;
      border-radius: 6px;
      background: rgba(218, 243, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(22, 177, 255, 1);
    }
    .title{
      font-family: PingFang SC;
      font-size: 15px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      margin-bottom:10px;
    }

  }
}
.main-bottom {
  background-color: rgb(var(--v-theme-surface));
  padding: 32px 24px 30px;
}
.class-bar-box{
  box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
  padding: 20px;
  border-radius: 6px;
}
.radar-box{
  width: 48%;
  height: 500px;
}
.box-shadow{
  border-radius:  6px;
  box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
  padding: 24px;
}
.chart-line{
  height: 30px;
  .title{
    font-family: PingFang SC;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-right:15px;
  }
  .tip{
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: rgba(46, 38, 61, 0.55);
  }
  .tip-item{
    display: flex;
    align-items: center;
    margin-left: 30px;
    .color-box{
      width: 16px;
      height: 16px;
      border-radius: 1px;
      margin-right: 8px;
    }
  }
}
::v-deep(.el-select__wrapper),
::v-deep(.el-select-dropdown){
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-popper.is-light .el-popper__arrow::before) {
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-select__wrapper){
  background-color: rgb(var(--v-theme-surface));
}
::v-deep(.el-select-dropdown__item){
  color: rgb(140, 87, 255);
}
</style>
